<template>
  <view class="container">
    <!-- Resource Header -->
    <view class="resource-header">
      <view class="title-section">
        <text class="title">{{ resource.title }}</text>
        <view class="type-badge">{{ resource.type }}</view>
      </view>
      <view class="meta-info">
        <view class="info-item">
          <u-icon name="account" size="28" color="#666"></u-icon>
          <text>{{ resource.author }}</text>
        </view>
        <view class="info-item">
          <u-icon name="calendar" size="28" color="#666"></u-icon>
          <text>{{ resource.date }}</text>
        </view>
      </view>
      <view class="tags">
        <text 
          v-for="(tag, index) in resource.tags"
          :key="index"
          class="tag"
        >{{ tag }}</text>
      </view>
    </view>

    <!-- Resource Content -->
    <scroll-view scroll-y class="content-section">
      <!-- Description -->
      <view class="section">
        <text class="section-title">Overview</text>
        <text class="description">{{ resource.description }}</text>
      </view>

      <!-- Content Preview -->
      <view class="section">
        <text class="section-title">Content Preview</text>
        <view class="preview-container">
          <!-- PDF Preview -->
          <template v-if="resource.type === 'PDF'">
            <view class="pdf-preview">
              <image 
                v-for="(page, index) in resource.preview.pages"
                :key="index"
                :src="page"
                mode="aspectFit"
                class="pdf-page"
              ></image>
            </view>
          </template>

          <!-- Video Preview -->
          <template v-else-if="resource.type === 'Video'">
            <video
              :src="resource.preview.videoUrl"
              :poster="resource.preview.thumbnail"
              class="video-preview"
              controls
            ></video>
          </template>

          <!-- Image Preview -->
          <template v-else-if="resource.type === 'Image'">
            <image
              :src="resource.preview.imageUrl"
              mode="aspectFit"
              class="image-preview"
              @click="previewImage"
            ></image>
          </template>

          <!-- Text Preview -->
          <template v-else>
            <rich-text 
              :nodes="resource.preview.content"
              class="text-preview"
            ></rich-text>
          </template>
        </view>
      </view>

      <!-- Additional Resources -->
      <view class="section" v-if="resource.additionalResources.length">
        <text class="section-title">Additional Resources</text>
        <view class="resources-list">
          <view 
            v-for="(item, index) in resource.additionalResources"
            :key="index"
            class="resource-item"
            @click="openResource(item)"
          >
            <u-icon :name="getResourceIcon(item.type)" size="40" color="#4b7bec"></u-icon>
            <view class="resource-info">
              <text class="resource-name">{{ item.name }}</text>
              <text class="resource-size">{{ item.size }}</text>
            </view>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
      </view>

      <!-- References -->
      <view class="section" v-if="resource.references.length">
        <text class="section-title">References</text>
        <view class="references-list">
          <view 
            v-for="(ref, index) in resource.references"
            :key="index"
            class="reference-item"
          >
            <text class="reference-text">{{ ref }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Action Buttons -->
    <view class="action-buttons">
      <u-button 
        :plain="true"
        icon="download"
        @click="downloadResource"
      >Download</u-button>
      <u-button
        :plain="true"
        icon="star"
        :type="isBookmarked ? 'primary' : 'info'"
        @click="toggleBookmark"
      >{{ isBookmarked ? 'Bookmarked' : 'Bookmark' }}</u-button>
      <u-button
        type="primary"
        icon="share"
        @click="showShareOptions"
      >Share</u-button>
    </view>

    <!-- Share Options -->
    <u-action-sheet
      :show="showShareSheet"
      :actions="shareActions"
      @close="showShareSheet = false"
      @select="handleShare"
      title="Share Resource"
      description="Choose how you want to share this resource"
    ></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      resourceId: null,
      isBookmarked: false,
      showShareSheet: false,
      shareActions: [
        { name: 'Share Link', icon: 'link' },
        { name: 'Share to Chat', icon: 'chat' },
        { name: 'Download & Share', icon: 'download' }
      ],
      resource: {
        title: 'Human Anatomy Atlas - Cardiovascular System',
        type: 'PDF',
        author: 'Dr. Sarah Johnson',
        date: '2024-03-20',
        tags: ['Anatomy', 'Cardiovascular', 'Atlas'],
        description: 'Comprehensive atlas of the human cardiovascular system with detailed illustrations and explanations...',
        preview: {
          pages: [
            '/static/images/preview1.jpg',
            '/static/images/preview2.jpg'
          ]
        },
        additionalResources: [
          {
            name: '3D Heart Model.obj',
            type: 'model',
            size: '25 MB'
          },
          {
            name: 'Blood Flow Animation.mp4',
            type: 'video',
            size: '15 MB'
          }
        ],
        references: [
          'Gray\'s Anatomy, 41st Edition (2015)',
          'Journal of Cardiovascular Medicine, Vol. 25, Issue 3',
          'Clinical Anatomy Guidelines (2023)'
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.resourceId = options.id
      // TODO: Fetch resource data
    }
  },
  methods: {
    getResourceIcon(type) {
      const icons = {
        pdf: 'file-text',
        video: 'video',
        image: 'image',
        model: 'cube',
        default: 'file'
      }
      return icons[type] || icons.default
    },
    previewImage() {
      if (this.resource.type === 'Image') {
        uni.previewImage({
          urls: [this.resource.preview.imageUrl]
        })
      }
    },
    openResource(resource) {
      // TODO: Implement resource opening based on type
      uni.showToast({
        title: `Opening ${resource.name}`,
        icon: 'none'
      })
    },
    downloadResource() {
      uni.showLoading({
        title: 'Downloading...'
      })

      // TODO: Implement download functionality
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: 'Download complete',
          icon: 'success'
        })
      }, 2000)
    },
    toggleBookmark() {
      this.isBookmarked = !this.isBookmarked
      
      uni.showToast({
        title: this.isBookmarked ? 'Added to bookmarks' : 'Removed from bookmarks',
        icon: 'none'
      })
    },
    showShareOptions() {
      this.showShareSheet = true
    },
    handleShare(index) {
      this.showShareSheet = false
      
      switch(index) {
        case 0: // Share Link
          uni.setClipboardData({
            data: `https://medical-edu.app/resource/${this.resourceId}`,
            success: () => {
              uni.showToast({
                title: 'Link copied to clipboard',
                icon: 'success'
              })
            }
          })
          break
        case 1: // Share to Chat
          uni.navigateTo({
            url: '/pages/chat/share?type=resource&id=' + this.resourceId
          })
          break
        case 2: // Download & Share
          this.downloadResource()
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.resource-header {
  background-color: #ffffff;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
      margin-right: 20rpx;
    }

    .type-badge {
      background-color: rgba(75, 123, 236, 0.1);
      color: #4b7bec;
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }

  .meta-info {
    display: flex;
    gap: 30rpx;
    margin-bottom: 20rpx;

    .info-item {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .tag {
      background-color: #f0f2f5;
      color: #666;
      padding: 4rpx 16rpx;
      border-radius: 16rpx;
      font-size: 24rpx;
    }
  }
}

.content-section {
  flex: 1;
  padding: 30rpx;

  .section {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .description {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.preview-container {
  .pdf-preview {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .pdf-page {
      width: 100%;
      height: 800rpx;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }
  }

  .video-preview {
    width: 100%;
    height: 400rpx;
    border-radius: 8rpx;
  }

  .image-preview {
    width: 100%;
    height: 400rpx;
    border-radius: 8rpx;
  }

  .text-preview {
    font-size: 28rpx;
    line-height: 1.6;
    color: #333;
  }
}

.resources-list {
  .resource-item {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 20rpx;
    background-color: #f8f9fa;
    border-radius: 8rpx;
    margin-bottom: 16rpx;

    .resource-info {
      flex: 1;

      .resource-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 4rpx;
      }

      .resource-size {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.references-list {
  .reference-item {
    padding: 16rpx;
    border-left: 4rpx solid #4b7bec;
    background-color: #f8f9fa;
    margin-bottom: 16rpx;

    .reference-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
}

.action-buttons {
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  :deep(.u-button) {
    flex: 1;
  }
}
</style> 